<template>
  <div class="itemTwo">
    <h5>周接诊数(单位:人次)</h5>
    <div id="myEchar"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue';
import { itemTwo } from '../../../api/echart'
export default {
  name: 'ItemTwo',
  setup() {
    let data = reactive({})

    async function getState() {
      data = await itemTwo()
    }

    onMounted(() => {
      getState().then(() => {
        console.log('折线图', data)

        let mychar = echarts.init(document.getElementById('myEchar'))

        mychar.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#e6b600'
              }
            }
          },
          legend: {
            data: ['内科', '呼吸科', '康复科', '外科', '骨科',],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.day,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          series: [
            {
              name: '内科',
              type: 'line',
              data: data.num.Chemicals,
              smooth: true,
              showSymbol: false,
              stackl: 'Total',
              areStyle: {
                opacity: 0.8,
              }
            },
            {
              name: '呼吸科',
              type: 'line',
              data: data.num.Clothes
            },
            {
              name: '康复科',
              type: 'line',
              data: data.num.Electrical
            },
            {
              name: '外科',
              type: 'line',
              data: data.num.digit
            },
            {
              name: '骨科',
              type: 'line',
              data: data.num.gear
            },
          ]
        })
      })
    })

    return {
      data, getState
    }
  }
}
</script>

<style scoped>
#myEchar {
  width: 350px;
  height: 300px;
  margin-top: -60px;
}

h5 {
  text-align: center;
  color: #fff;
}
</style>
